<template>
  <div>
    <a-dropdown :trigger="['click']">
        <a-tooltip>
            <template slot="title">
                原名：{{axis.alia}}
            </template>
            <div class="y-axis" @mouseenter="deleteStyle = 'opacity: 1'" @mouseleave="deleteStyle = 'opacity: 0'">
                <i class="el-icon-arrow-down"></i>
                <span>{{ axis.rename }}</span>
                <span class="yAxis-computeType">（{{ computeType }}）</span>
                <i class="el-icon-error" :style="deleteStyle" @click="handleDelete"></i>
            </div>
        </a-tooltip>
        <a-menu slot="overlay" @click="handleMenuClick" style="width: 150px">
            <a-menu-item key="rename">修改显示名称</a-menu-item>
            <a-sub-menu v-if="axis.dataType === DataType.NUMBER" key="computeType" title="汇总方式">
                <a-menu-item style="width: 150px" v-for="(value, key ) in numberType" :key="key">{{value}}</a-menu-item>
            </a-sub-menu>
            <a-sub-menu v-if="axis.dataType !== DataType.NUMBER" key="computeType" title="汇总方式">
                <a-menu-item style="width: 150px" v-for="(value, key )  in noNumberType" :key="key">{{value}}</a-menu-item>
            </a-sub-menu>
            <a-menu-item key="delete">删除字段</a-menu-item>
            
        </a-menu>
    </a-dropdown>
    <div class="axis-dialog" v-show="renameVisible">
        <div style="margin-bottom: 5px">
            <a-input v-model="name" />
        </div>
        <div class="buttoms">
            <a-button @click="renameVisible = false">
                取消
            </a-button>
            <a-button type="primary" @click="handleRenameOk">
                确定
            </a-button>
        </div>
    </div>
</div>
</template>

<script>
import {DataType} from '@/filterConstant'
export default {
    props:{
        axis: Object
    },
    data(){
        return {
            deleteStyle: "opacity: 0",
            name: '',
            DataType,
            renameVisible: false,
            type: '',
            numberType: {
                sum: '求和',
                mean: '平均',
                max: '最大值',
                min: '最小值',
                count: '记录数量',
            },
            noNumberType: {
                count: '记录数量',
            },
        }
    },
    computed:{
        computeType(){
            let title = ""
            switch(this.axis.computeType){
                case 'sum':
                    title = '求和'
                    break;
                case 'mean':
                    title = '平均'
                    break;
                case 'max':
                    title = '最大值'
                    break;
                case 'min':
                    title = '最小值'
                    break;
                case 'count':
                    title = '记录数量'
                    break;
            }
            return title
        }
    },
    methods:{
        handleDelete(){
            this.$emit('deleteDrag', this.axis.uuid, 'yAxis')
        },
        handleMenuClick(e){
            const {key, keyPath} = e
            if(key === 'rename') {
                this.name = this.axis.rename
                this.renameVisible = true
            } else if (key === 'delete') {
                this.handleDelete()
            } else if (keyPath[ keyPath.length - 1 ] === 'computeType') {
                this.$emit('change', this.axis.uuid, 'yAxis', {computeType: key})
            }
        },
        handleRenameOk(){
            this.$emit('change', this.axis.uuid, 'yAxis', {rename: this.name})
            this.renameVisible = false
        }
    }
};
</script>

<style lang="less">
    .y-axis{
        background: #0db3a6;
        color: #fff;
        padding: 0 10px;
        margin: 2px;
        height: 28px;
        line-height: 28px;
        border-radius: 14px;
        cursor: pointer;

        span{
            margin-left: 5px;
        }

        .yAxis-computeType{
            font-size: 12px;
            margin-left: 0px;
        }
    }

    .axis-dialog{
        position: absolute;
        background-color: #fff;
        z-index: 1;
        padding: 10px;
        width: 220px;
        height: 100px;
        border-radius: 2px;
        box-shadow: 0 0 6px rgb(51 51 51 / 20%);

        input{
            color: black !important;
            border-color: #e0e0e0 !important;
            font-weight: 400;
            border-radius: 2px;
        }

        .buttoms{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            button{
                width: 90px;
            }
        }
    }
</style>